<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="goods-page">
		<div class="index-ad">
			 <u-swiper
				:list="info.goodsImages"
				height="750rpx"
				indicator
				indicatorMode="line"
			></u-swiper>
		</div>
		<div class="goods-block">
			<div class="goods-name">{{info.goodsName}}</div>
			<div class="goods-between" style="margin-top:32rpx">
				<div class="goods-price" v-if="info.goodsPrice != '电议'">
					<span style="font-size:24rpx">￥</span>{{info.goodsPrice}}/吨
				</div>
				<div  class="goods-price" v-else>
					<u-button v-if="info.goodsPrice == '电议'" plain type="warning"  text="我要询价" size="small" shape="circle" @click="toaddInquiry" :customStyle="{'background':'#fff','border':'1px solid #ff4600','color':'#ff4600'}"></u-button>
				</div>
				<div class="goods-time">
					<img src="https://pic.moresu.com/Fu-I7DNORN3BEhGSVDmc0noUdlyy" style="width:20rpx;height:20rpx;display: inline-block;margin-right:10rpx;vertical-align: middle;"/>
					<span style="vertical-align: middle;">更新时间：{{info.priceTime}}</span>
				</div>
			</div>
		</div>
		<div class="goods-block" style="padding:24rpx 0 0 0;margin-bottom:0" :style="{'margin-bottom':info.endInvoiceDay != '' ? '0' : '20rpx','padding-bottom':info.endInvoiceDay != '' ? '0' : '24rpx'}">
			<div class="goods-row">
				<span class="label">交货方式</span><span>含税不含运费</span>
			</div>
			<div class="goods-row">
				<span class="label">牌号</span><span>{{info.goodsSn}}</span>
			</div>
			<div class="goods-row">
				<span class="label">生产厂家</span><span>{{info.brandName}}</span>
			</div>
			<div class="goods-row">
				<span class="label">发货地</span><span>{{info.sendArea}}</span>
			</div>
			<div class="goods-row">
				<span class="label">发货期</span><span>{{info.sendWaitDays}}</span>
			</div>
			<div style="padding: 24rpx; font-size: 12px; line-height: 24px; background: rgb(248, 248, 248); cursor: pointer; color: rgb(128, 128, 128); " v-if="info.endInvoiceDay != ''">
				<span style="padding-right: 10px;">开票信息</span> 
				<span style="white-space: nowrap; padding-right: 10px;">{{info.endInvoiceDay}}</span>
			</div>
		</div> 
		
		

		<!-- 用户评价和商品 -->
		<div class="evaluate-div">

			<!-- 用户评价 -->
			  <div class="evaluate-title">
			    用户评价
			    <span style="border:0;float:right;margin-top:5px;font-weight: 400;line-height: 25px;color:#FF4600;cursor: pointer" @click="toGoodsEvaluate" v-if="allNum > 0">
			        <span style="vertical-align: middle">查看全部</span>
			    </span>
			  </div>
			  <div class="evaluate-con">
                <!--暂无评论-->
                <div style="font-size: 14px;text-align:center;line-height: 33px;color: #D4D4D4;" v-if="allNum == 0">暂没有人评价，快看看其他吧！</div>
                <div v-else>
                    <div class="evaluate-top" v-if="evaluateList[0]">
                        <img :src="evaluateList[0]['userHeader']" style="width:33px;height:33px;border-radius: 50%;object-fit: contain;vertical-align:middle;"/>
                        <div class="user-info">
                            <div class="user-name">
                                <span style="margin-right:10px;">{{evaluateList[0]['userName']}}</span>
                                <u-rate v-model="evaluateList[0]['averageScore']" active-color="#FF4600"></u-rate>
                            </div>
                            <div class="time">{{evaluateList[0]['evaluateTime']}}</div>
                        </div>
                    </div>
                    <div class="evaluate-text" v-if="evaluateList[0]">
                        {{evaluateList[0]['evaluateContent']}}
                    </div>
                    <div class="evaluate-img" v-if="evaluateList[0]">
                        <img :src="item" class="evaluate-img-item" v-for="(item,index) in evaluateList[0]['evaluatePics']" :key="index" @click="preview(evaluateList[0]['evaluatePics'],index)"/>
                    </div>
                </div>
              </div>

			

			<!-- 商品问答 -->
			<div class="evaluate-title">
                商品问答
                <span v-if="questionsCount > 0" style="border:0;float:right;margin-top:5px;font-weight: 400;line-height: 25px;color:#FF4600;cursor: pointer" @click="toGoodsAsk">
                    <span style="vertical-align: middle">
						查看全部
					</span>
                </span>
            </div>
			<div class="ask-con">
                <div v-if="questionsCount > 0" >
					<div class="ask-item" v-for="(item,index) in questionsList" :key="index">
						<div class="ask-label" v-show="index < 2">问</div>
						<div class="ask-text" v-show="index < 2">{{ item.questionContent }}</div>
						<div class="ask-btn" v-show="index < 2" @click="toGoodsAskInfo(item)">查看回答</div>
                    </div>
				</div>

                <!--暂无问答-->
                <div class="ask-item ask-nodata" v-if="questionsCount == 0" >
                    <div class="ask-label" style="width:45px">问大家</div>
                    <div class="ask-text" style="color: #D4D4D4;">货物好不好，问问买过的人</div>
                    <div>
						<u-button type="primary" :plain="true" text="去提问" color="#ff4600"  size="mini" shape="circle" style="float:right;margin-top:5px;padding:0 10px;width:70px"  @click="toSubmitQuestions"></u-button>
                    </div>
                </div>
            </div>

		</div>
		
		<div style="background: linear-gradient(to bottom, #ff4600, #fd7505);padding:12px">
			<!--资料下载-->
			<div style="font-size: 14px;font-weight: bold;color:#fff;">
			  资料下载
			</div>
			<div style="padding:12px;background: #fff;border-radius: 8px;margin-top:12px">
				<div v-if="info.documentFile && info.documentFile.length > 0">
				<div style="padding:6px;color:red;font-size:12px;margin-bottom:10px">* 图片格式的资料下载完成后请到手机相册进行查看</div>
					<div v-for="(item,index) in info.documentFile" :key="index" style="margin-bottom: 40rpx;">
						 <div class="download-title" style="font-size: 14px;font-weight: bold">{{item.fileName}}</div>
						  <div class="download-list">
							<div class="download-item" style="margin-top:10px" @click="downFile(item)" :key="item">
							   <u-icon name="order"></u-icon>
							   <span style="overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;padding-left:10rpx;width:calc(100% - 32rpx);text-decoration: underline;color:#409eff;cursor: pointer;font-size: 24rpx;">{{item.fileUrl}}</span>
							</div>
						  </div>
						
					</div>
				</div>
				
				<div style="font-size: 14px;text-align:center;line-height: 33px;" v-else>暂没有资料可下载，快看看其他吧！</div>
			</div>
		</div>
		
		<div class="goods-block">
			<div class="goods-store" @click="toStoreInfo">
				<div class="goods-img">
					<img :src="info.storeLogo" style="width:100%;height:100%;object-fit: contain;"/>
				</div>
				<div class="store-info">
					<div class="store-name">{{info.storeName}}</div>
					<div class="store-attar">主营：{{info.mainBusiness}}</div>
				</div>
				<div class="shop-btn"> 进入店铺 </div>
			</div>
		</div>
		
		<div class="goods-info-title">
			<div :class="{'cut-title':cutIndex==1}" @click="cutIndex=1">商品详情</div>
			<!-- <div :class="{'cut-title':cutIndex==2}" @click="cutIndex=2">资料下载</div> -->
		</div>
		<div style="background:#fff;padding:40rpx;" v-show="cutIndex==1">
			<u-parse :content="info.goodsDesc"></u-parse>
		</div>
		<div style="background:#fff;padding:40rpx;" v-show="cutIndex==2">
			<div style="padding:6px;color:red;font-size:12px;margin-bottom:10px">* 图片格式的资料下载完成后请到手机相册进行查看</div>
			<div v-if="info.documentFile && info.documentFile.length > 0" v-for="(item,index) in info.documentFile" :key="index" style="margin-bottom: 80rpx;">
				 <div class="download-title" style="font-size: 14px;font-weight: bold">{{item.fileName}}</div>
				  <div class="download-list">
					<div class="download-item" style="margin-top:10px" @click="downFile(item)" :key="item">
					   <u-icon name="order"></u-icon>
					   <span style="overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;padding-left:10rpx;width:calc(100% - 32rpx);text-decoration: underline;color:#409eff;cursor: pointer;font-size: 24rpx;">{{item.fileUrl}}</span>
					</div>
				  </div>
				
			</div>
			<!-- <div v-if="info.featureList && info.featureList.properties && info.featureList.properties.length > 0">
				 <div class="download-title" style="font-size: 14px;font-weight: bold">物性表：</div>
				  <div class="download-list">
					<div class="download-item" v-for="item in info.featureList.properties" style="margin-top:10px" @click="downFile(item)" :key="item">
					   <u-icon name="order"></u-icon>
					   <span style="overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;padding-left:10rpx;width:calc(100% - 32rpx);text-decoration: underline;color:#409eff;cursor: pointer;font-size: 24rpx;">{{item}}</span>
					</div>
				  </div>
				
			</div>
			<div style="margin-top:80rpx" v-if="info.featureList&&info.featureList.report && info.featureList.report.length > 0">
				    <div class="download-title" style="font-size: 14px;font-weight: bold">检测报告单：</div>
				     <div class="download-list">
						<div class="download-item" v-for="item in info.featureList.report" style="margin-top:10px" @click="downFile(item)" :key="item">
						  <u-icon name="order"></u-icon>
						   <span style="overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;text-decoration: underline;color:#409eff;cursor: pointer;font-size: 24rpx;">{{item}}</span>
						</div>
				     </div>
			</div> -->
		</div>
		
		<div class="page-bottom-btn" :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',paddingLeft:'20rpx',paddingRight:'20rpx'}">
			<div style="width:100rpx;font-size:24rpx">
				<!-- #ifdef MP -->
				<button style="background: none;width:100rpx" open-type="contact">
					<u-icon name="chat" size="24" label="客服" labelPos="bottom" labelSize="12px"></u-icon>
				</button> 
				<!--#endif -->
				<!-- #ifdef H5 | APP-PLUS -->
				<u-icon name="chat" size="24" label="客服" labelPos="bottom" labelSize="12px" @click="callPhone(contactMobile)" :customStyle="{'width':'100rpx','display':'block','text-align':'center'}"></u-icon>
				<!--#endif -->
			</div>
			<u-button text="立即下单" type="primary" shape="circle" v-if="info.goodsPrice != '电议' && info.isStoreOpenBusiness == 1 && info.isShow == 1" @click="toAddOrder"></u-button>
			<u-button type="primary" shape="circle" v-else-if="info.isStoreOpenBusiness == 0" disabled>
				闭市中
			 <!-- <span style="padding-left:20rpx;" v-if="info.closeBusinessTip!= ''">开市时间：{{info.closeBusinessTip}}</span> -->
			</u-button>
			<!-- <u-button type="primary" shape="circle" v-else-if="info.goodsPrice == '电议'" @click="callPhone(info.storePhone)">
				<u-icon name="phone" size="24" :label="info.storePhone"  labelSize="12px" color="#fff" labelColor="#fff"></u-icon>
			</u-button> -->
			<u-button type="primary" shape="circle" v-else-if="info.isShow == 0" disabled>
				商品已下架
			</u-button>	
			<u-button v-if="info.goodsPrice == '电议'" type="primary"  text="我要询价"  shape="circle" @click="toaddInquiry" :customStyle="{'margin-left':'24rpx','background':'#2B8DED','border':'1px solid #2B8DED'}"></u-button>
		
		</div>
		
	</div>
	
   </div>
</template>

<script>
import { goodPriceLog, goodsInfo, pageSeo, commonData } from '@/config/api.js';
import { getQuestionListAPI,getEvaluateListAPI } from '@/config/goods.js';
import { saveImg, downloadFun } from '@/plugins/utils.js';
import base from '@/config/baseUrl.js';
import store from '@/store';
const log = require('@/plugins/log.js');
const defaultAskListQuery = {
  goodsId: '',
  pageNum: 1,
  pageSize: 10,
};
const defaultEvaluateListQuery = {
	goodsId: '',
	scoreType: "high", //评价类型，高-high，中-middle，低-low
	pageNum: 1,
	pageSize: 10,
};
export default {
	components: {
	},
	data() {
		return {
			goodsId: '',
			info: {},
			systemInfo: base.systemInfo,
			cutIndex: 1,
			contactMobile: '',

            askListQuery: JSON.parse(JSON.stringify(defaultAskListQuery)),
			questionsList:[],
			questionsCount: 0,

			evaluateListQuery:JSON.parse(JSON.stringify(defaultEvaluateListQuery)),
			evaluateList:[],
			allNum:0,
		}
	},

	async onLoad(options) {
		this.goodsId = options.goodsId;
		this.getInfo();
		this.getEvaluateList();
		await this.$onLaunched;
		
		// #ifdef H5 | APP-PLUS
		pageSeo({ pageType: 'indexPage' }).then((res) => {
			document.title = res.pageTitle;
		})
		commonData().then((res) => {
			this.contactMobile = res.contactMobile
		})
		// #endif
	},

	onShow(){
	  this.getQuestionList();
	},

	methods: {
		//图片预览
		preview(urlArray, index) {
			uni.previewImage({
				urls: urlArray,
				current: index
			})
		},
		//去商品评价页面
		toGoodsEvaluate() {
			this.judgeLogin(() => {
				uni.navigateTo({
					url: '/pagesCommon/goodsEvaluate?goodsId='+this.goodsId
				})
			})
		},
		//获取评价列表
		getEvaluateList() {
			const data = JSON.parse(JSON.stringify(this.evaluateListQuery));
            data.goodsId = this.goodsId;
			getEvaluateListAPI(data).then((res) => {
				this.allNum = res.count;
				this.evaluateList = res.list;
			})
		},
		//去商品问答页面
		toGoodsAsk() {
			this.judgeLogin(() => {
				uni.navigateTo({
					url: '/pagesCommon/goodsAsk?goodsId='+this.goodsId
				})
			})
		},
		//去商品回答页面
		toGoodsAskInfo(item) {
		    this.judgeLogin(() => {
				uni.navigateTo({
					url: '/pagesCommon/goodsAskInfo?questionId='+item.questionId
				})
		    })
		},
		//去提问页面
		toSubmitQuestions() {
			this.judgeLogin(() => {
				uni.navigateTo({
					url: '/pagesCommon/submitQuestions?goodsId='+this.goodsId
				})
			})
		},
		//获取问答列表
		getQuestionList() {
			const data = JSON.parse(JSON.stringify(this.askListQuery));
            data.goodsId = this.goodsId;
			getQuestionListAPI(data).then((res) => {
				this.questionsCount = res.count;
                this.questionsList = res.list;
			})
		},

		toaddInquiry() {
			getApp().globalData.goodsId = this.goodsId;
			uni.switchTab({
				url: '/pages/public/addInquiry'
			});
		},

		callPhone(num) {
			if (num.indexOf("*") == -1) {
				uni.makePhoneCall({
					phoneNumber: num
				});
			}
		},
		// 下载
		downFile(item) {
			const fileType = item.fileUrl.substring(item.fileUrl.lastIndexOf('.'));
			if (fileType == '.pdf') {
				downloadFun(item.fileUrl)
			} else {
				// #ifdef MP
				saveImg(item.fileUrl)
				// #endif
				// #ifdef H5
				uni.previewImage({ urls: [item.fileUrl] });
				// #endif
			}
		},

		toStoreInfo() {
			uni.navigateTo({
				url: '/pagesUser/business/businessPage?storeId=' + this.info.storeId
			})
		},
		getInfo() {
			goodsInfo({ goodsId: this.goodsId }).then((res) => {
				this.info = res
			})
		},

		toAddOrder() {
			this.judgeLogin(() => {
				uni.navigateTo({
					url: '/pagesUser/order/addOrder?goodsId=' + this.goodsId
				})
			})
		},

	}
};
</script>

<style lang="scss">
@import '@/style/common.scss';
.goods-page{
	padding-bottom:200rpx;
	.evaluate-div{
	    background: #fff;
        margin-bottom:8px;
		padding:0 16px;	
		.evaluate-title{
            font-size: 14px;
            line-height: 40px;
            color: #040404;
            font-weight: bold;
            padding-top:10px;
        }

		.evaluate-con{
            border-bottom:1px solid #eee;
            padding-bottom:20px;
			.evaluate-top{
				display: flex;
				justify-items: flex-start;
				align-items: center;
				.user-info{
					padding-left:10px;
					.user-name{
						display: flex;
						font-size: 12px;
						line-height: 20px;
						color: #333333;
					}
					.time{
						font-size: 10px;
						line-height: 18px;
						color: #D4D4D4;
					}
				}
			}
			.evaluate-text{
				font-size: 14px;
				line-height: 20px;
				color: #040404;
				margin-top:10px;
			}
			.evaluate-img{
				width:100%;
				display: flex;
				flex-wrap: wrap;
				.evaluate-img-item{
					margin-top:10px;
					margin-right:10px;
					width:75px;
					height:75px;
					object-fit: cover;
				}
			}
        }

		.ask-con{
            padding-bottom:10px;
			.ask-item{
				display: flex;
				justify-items: flex-start;
				align-items: center;
				margin-top:10px;
				.ask-label{
					width: 18px;
					height: 18px;
					background: #FF7800;
					border-radius: 2px;
					color:#fff;
					text-align: center;
					line-height: 18px;
					font-size:12px;
				}
				.ask-text{
					flex:1;
					padding:0 16px;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					font-size: 14px;
					color: #000000;
				}
				.ask-btn{
					font-size: 14px;
					font-weight: 400;
					line-height: 13px;
					color: #A7A7A7;
					cursor: pointer;
				}
			}
			.ask-nodata{
				padding-bottom: 10px;
			}
        }
	}
	.goods-block{
		background: #fff;
		padding:24rpx;
		margin-bottom:20rpx;
		.goods-name{
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
		}
		.goods-between{
			@include flexbox(space-between,center);
			.goods-price{
				color:#FF0000;
				font-size: 30rpx;
				font-weight: bold;
			}
			.goods-time{
				font-size: 22rpx;
				color: #B8B8B8;
			}
		}
		.goods-row{
			padding:24rpx;
			border-bottom:1px solid #eee;
			font-size: 24rpx;
			color: #000000;
			display: flex;
			justify-content:space-between;
			align-items: center;
		}
		.goods-row .label{
			color:#808080
		}
		.goods-row:first-child{
			padding-top:0px
		}
		.goods-row:last-child{
			border-bottom:0 solid #DEDEDE;
			padding-bottom:0px
		}
		.goods-store{
			@include flexbox(flex-start,center);
			.goods-img{
				width:86rpx;
				height:86rpx;
				border: 1px solid #FF5E01;
				border-radius: 50%;
				overflow: hidden;
			}
			.store-info{
				padding:0 30rpx;
				width:calc(100% - 226rpx);
				.store-name{
					font-size: 30rpx;
					font-weight: bold;
					color: #070D14;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					word-break: break-all;
				}
				.store-attar{
					font-size: 22rpx;
					color: #8B8B8B;
					margin-top:10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					word-break: break-all;
				}
			}
			.shop-btn {
			    width: 140rpx;
			    height: 48rpx;
			    line-height: 48rpx;
			    background-image: linear-gradient(to right, #ff4600, #fd7505);
			    font-size: 24rpx;
			    color: #fff;
			    border-radius: 24rpx;
			    display: inline-block;
			    padding: 0 20rpx;
			}
		}
		.block-title{
			@include flexbox(flex-start,center);
			font-size: 26rpx;
			color: #000000;
			font-weight: bold;
		}
		
	}
	.goods-info-title{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
		margin-top: 20rpx;
	}
	.goods-info-title .cut-title{
		font-weight: bold;
		position: relative;
	}
	.goods-info-title .cut-title::after{
		content: ' ';
		position: absolute;
		bottom:0px;
		width:60rpx;
		left:50%;
		margin-left:-30rpx;
		height: 6rpx;
		border-radius: 20%;
		background:#FF7800;
		display: block;
	}
	.download-list{
		.download-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
		}
	}
}

</style>